<template>
	<view class="progress">
		<view class="select">
		  <picker mode="selector" :value="timeIndex" :range="timeList" @change="changeTime">
		  	<view class="picker">
		  		<view class="time">按时间筛选</view>
		  		<span class="iconfont icon">&#xe602;</span>
		  	</view>
		  </picker>
		</view>
		<view class="progress-list">
			<view class="progress-item" v-for="item in 2" :key="item">
				<view class="header">
					<view class="avatar">
						<image src="" mode=""></image>
					</view>
					<view class="mes">
						<view class="member">
							业务员1
						</view>
						<view class="time">
							2024-01-05 13:21:23
						</view>
					</view>
				</view>
				<view class="pro-content">
					跟进内容跟进内容跟进内容跟进内容跟进内容跟进内容跟进内容跟进内容跟进内容跟进内容跟进内容跟进内容
				</view>
				<view class="file" v-if="item == 1">
					<view class="file-item">
						xxxxx.excel
					</view>
				</view>
				<view class="next-time">
					计划下次跟进时间：2024-01-24
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				timeIndex:0,
				timeList:['全部', '近七日', '近一个月', '近三个月', '近半年', '近一年']
			}
		},
		methods:{
			changeTime(e){
				console.log(e,this.timeIndex,'==============')
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import"@/common/style/customicons.scss";
	.progress{
		.select{
			@include flex-r-end-center;
			.picker{
				@include flex-r-start-center;
				.time{
					font-size: 24rpx;
					color: #101010;
					padding-right: 15rpx;
				}
				.icon{
					color: #101010;
					font-size: 24rpx;
				}
			}
		}
		.progress-list{
			padding: 28rpx 0 0;
			.progress-item{
				padding: 0 0 34rpx;
				.header{
					@include flex-r-start-center;
					.avatar{
						@include avatar(62);
						background-color: #9A9A9A;
					}
					.mes{
						font-size: 26rpx;
						padding-left: 24rpx;
						.member{
							color: #000;
							padding: 0 0 6rpx;
						}
						.time{
							color: #9A9A9A;
						}
					}
				}
				.pro-content{
					padding: 26rpx 0 18rpx;
					font-size: 26rpx;
					color: #000;
				}
				.file{
					.file-item{
						font-size: 26rpx;
						color: #000;
						background-color: #F3F6F9;
						height: 52rpx;
						text-align: center;
						line-height: 52rpx;
						border-radius: 6rpx;
						margin-bottom: 18rpx;
					}
				}
				.next-time{
					color: #9A9A9A;
					font-size: 26rpx;
				}
			}
		}
	}
</style>